<script>
const app = getApp();
export default {
  data() {
    return {
      BestImgUrl: app.globalData.imgurl,
      BestImgUrlBwc: app.globalData.imgurlBwc,
      userInfo: {},
      Yirenzhenglist: [],
      Ptshow: false,
      Ptlist: [],
      platformType: 0,
      platformData: {},
      LaiYuan: 0,
      selectPlatformShow: false,
      noteDataList: [//添加平台账号数据
        //{id: 0, title: '绑定账号', type: 0, name: '上传', subtitle: ''},
        {id: 1, title: '小红书', type: 1, name: '添加小红书', subtitle: '上传小红书我的页面', content: '打开小红书APP，进入【我】页面截图上传'},
        {id: 2, title: '大众点评', type: 3, name: '添加大众点评', subtitle: '上传大众点评个人中心页面', content: '开大众点评APP，进入【我的】页面，截图上传；\n大众点评小程序，进入【我的】页面，点击“个人主页”截图上传'},
      ],
      noteItem: '', //绑定账号
      btnHeight: '',//底部按钮高度
    }
  },
  onLoad(ops) {
    // let Details = JSON.parse(decodeURIComponent(ops.data));
    // this.platformType = Details.platform_type
    // this.platformData = Details
    // console.log('某个平台数据', Details)
    //
    // let laiyuan = ops.LaiYuan
    // if(laiyuan && laiyuan == 1){
    //   this.LaiYuan = laiyuan
    // }
    //  获取底部按钮高度
    uni.createSelectorQuery().select('.bottom').boundingClientRect(rect => {
      this.btnHeight = rect.height
      console.log('高度===', rect.height)
    }).exec();
  },
  onShow() {
    this.getPingtaiList()
    this.myrenzhenglist()
  },
  methods: {
    addNote() {
      this.selectPlatformShow = true
    },
    toAddNote(res) {
      console.log('res', res)
      this.selectPlatformShow = false
      let jsonRes = JSON.stringify(res)
      if (res.type === 1) {
        uni.navigateTo({
          url: '/sub_account/pages/add_note?data=' + encodeURIComponent(jsonRes)
        })
      } else if (res.type === 3) {
        uni.navigateTo({
          url: '/sub_account/pages/add_note?data=' + encodeURIComponent(jsonRes)
        })
      } else{
        uni.navigateTo({
          url: '/sub_account/pages/all_add_note?data=' + encodeURIComponent(jsonRes)
        })
      }

    },
    GetUserInfo() {
      let that = this
      that.$api.GetuserInfo({}).then(res => {
        console.log('个人信息', res.data.result);
        this.userInfo = res.data.result
      }).catch(err => {
      })
    },
    myrenzhenglist() {
      let that = this
      that.$api.MyuserCertifiedlist({
        platform_type: 2
      }).then(res => {

        let datas = res.data.result

        //筛选出上个页面所选的平台列表
        let newArry = []
        datas.forEach(function (item, index) {
          if (item.platform_type == that.platformType) {
            newArry.push(item)
          }
        });
        that.Yirenzhenglist = res.data.result
        console.log('我的认证列表', res.data.result);

      }).catch(err => {
      })
    },
    getPingtaiList() {
      // let that = this
      // that.$api.userCertifiedplatform({
      //
      // }).then(res => {
      //   console.log('平台列表', res.data.result);
      //   that.Ptlist = res.data.result
      // }).catch(err => {})
    },
    addRenZheng() {
      //this.Ptshow = true
      let ptData = {
        label: this.platformData.platform.platform_name,
        value: this.platformData.platform_type,
        screenshot_example: this.platformData.platform.screenshot_example,
        url_example: this.platformData.platform.url_example
      }
      uni.navigateTo({
        url: '/subpackageA/pages/Addapprove/Addapprove?data=' + encodeURIComponent(JSON.stringify(ptData))
      })
    },
    Ptconfirm(e) {
      console.log(e)
      let ptData = {
        label: e[0].label,
        value: e[0].value,
        screenshot_example: this.platformData.platform.screenshot_example,
        url_example: this.platformData.platform.url_example
      }
      uni.navigateTo({
        url: '/subpackageA/pages/Addapprove/Addapprove?data=' + encodeURIComponent(JSON.stringify(ptData)) + '&LaiYuan=' + this.LaiYuan
      })
    },
    ToUp(data) {
      // console.log("data" ,data)
      // return
      // let ptData = {
      //   label: data.platform.platform_name,
      //   value: data.platform.platform_type,
      //   screenshot_example: data.platform.screenshot_example,
      //   url_example: data.platform.url_example
      // }
      console.log("data", data)
      this.noteDataList.forEach(function (item, index) {
        if (item.type === data.platform.platform_type) {
          uni.navigateTo({
            url: '/sub_account/pages/add_note?upDa=' + encodeURIComponent(JSON.stringify(data)) + '&data=' + encodeURIComponent(JSON.stringify(item))
          })
        }
      });

      // uni.navigateTo({
      //   url: '/sub_account/pages/add_note?data=' + encodeURIComponent(JSON.stringify(data)) + '&title=更新'
      // })
    }
  }
}
</script>

<template>
  <view>
    <u-navbar title="笔记平台账号" back-icon-color="#000" :is-back="true" title-color="#000"
              :background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
    <view style="color: #fd973b;background-color: #fdf7f1;font-size: 24rpx;padding: 10rpx 30rpx;line-height: 48rpx">
      请勿在有订单未完成的情况下修改小红书号或大众点评号，否则会导致订单检测失败
    </view>
    <view class="order_list_wrap" v-if="Yirenzhenglist.length !=0">
      <view class="order_list_item" v-for="(item,index) in Yirenzhenglist" :key="index">
        <!--        <image class="right_top_icon" :src="BestImgUrlBwc+'/note/xhs@2x.png'" v-if="item.platform_type == 1"></image>-->
        <!--        <image class="right_top_icon" :src="BestImgUrlBwc+'/note/dzdp@2x.png'" v-if="item.platform_type == 2"></image>-->
        <view class="goods_info u-flex">
          <view class="goods_name">
            <view class="u-flex">{{ item.platform.platform_name }}
              <view class="u-flex" style="padding: 0 10rpx;height: 36rpx;;border-radius: 8rpx 8rpx 8rpx 8rpx;
                  margin-left: 10rpx;font-size: 24rpx;color: #FFFFFF; text-align: center;line-height: 36rpx;"
              :style="{background: item.check_status === 1 ? '#FF9536' : item.check_status === 2 ? '#0cba2f' :'#fd2740'}">
                <image style="width: 28rpx;height: 28rpx;margin-right: 6rpx;" :src="item.check_status === 1 ? '/static/images/wait.png' : item.check_status === 2 ? '/static/images/yes.png' :'/static/images/bh.png'"></image>
                {{ item.check_status === 1 ? '待审核' : item.check_status === 2 ? '已绑定' :'认证失败'}}
              </view>
            </view>
            <view class="u-flex">
              <text v-if="item.platform_type == 3">大众点评等级：LV{{ item.level }}</text>
              <text  v-if="item.platform_type == 3" style="color: #aaaaaa;font-size: 20rpx;margin: 0 10rpx">|</text>
              账号：{{ item.account }} </view>
            <view class="u-flex">粉丝数：{{ item.fans }}
              <text style="color: #aaaaaa;font-size: 20rpx;margin: 0 10rpx">|</text>
              获赞数：{{ item.likes }}
            </view>
            <view style="margin-top: 20rpx;background: linear-gradient( 270deg, rgb(255,255,255) 58%, rgb(241,241,241));
              padding: 16rpx 20rpx;display: flex;align-items: center;border-radius: 8rpx">
              <u-icon name="clock" color="#666666" size="32"></u-icon>
              <text style="margin-left: 10rpx">绑定时间：{{ item.create_time }}</text>
            </view>
            <view v-if="item.remark && item.check_status !== 1 && item.check_status !== 2" style="margin-top: 20rpx;background-color: #fff5ea;
              padding: 16rpx 20rpx;display: flex;align-items: center;border-radius: 8rpx">
              <text>驳回原因：{{ item.remark }}</text>
            </view>
          </view>
          <view class="goods_img">
            <image :src="BestImgUrlBwc+'/note/xhs@2x.png'" v-if="item.platform_type == 1"></image>
            <image :src="BestImgUrlBwc+'/note/dzdp@2x.png'" v-if="item.platform_type == 3"></image>
          </view>
        </view>
        <view class="order_btnzu u-flex">
          <view class="right_zu u-flex">
            <view>解绑</view>
            <view style="flex: 1"></view>
            <view @click="ToUp(item)">更新</view>
          </view>
        </view>
      </view>
      <view :style="{height: btnHeight + 'px'}"></view>
    </view>
    <view v-else
          style="display: flex;justify-content: center;flex-direction: column;align-items: center;height: 800rpx;">
      <image :src="BestImgUrlBwc + '/note/note_null.png'" style="width: 300rpx; height:220rpx;"></image>
      <view style="font-size: 28rpx;color: #666666;;margin-top: 30rpx">
        暂无平台账号名片
      </view>
      <view style="font-size: 28rpx;color: #666666;margin-top: 10rpx">
        绑定成功后可报名活动，快去添加吧~
      </view>
    </view>

    <view class="bottom" style="padding-bottom: 0">
      <view @click="addNote"
            style="background-color: #F97632;width: 690rpx;text-align: center;color: white;padding: 20rpx 0;margin:20rpx 30rpx;border-radius: 60rpx">
        添加账号
      </view>
    </view>
    <u-popup v-model="selectPlatformShow" mode="bottom" border-radius="30" :mask-close-able="true" :closeable="true">
      <view class="SubOrder_wrap">
        <view class="popup_title">选择绑定账号的平台</view>
        <view style="display:flex;">
          <view v-for="(item,index) in noteDataList" :key="index" style="display: flex;flex-direction: column;margin-left: 20rpx" @click="toAddNote(item)">
            <u-icon v-if="item.type === 0" name="plus" color="#FF7900" size="40" style="border: 1px solid #FF7900;border-radius: 20rpx;padding:42rpx"></u-icon>
            <image v-if="item.type === 1" style="width: 128rpx;height: 128rpx" :src="BestImgUrlBwc+'/note/xhs@2x.png'"></image>
            <image v-if="item.type === 3" style="width: 128rpx;height: 128rpx" :src="BestImgUrlBwc+'/note/dzdp@2x.png'"></image>
            <view style="font-size: 28rpx;color: #888888;text-align: center;margin-top: 18rpx">{{item.title}}</view>
          </view>

        </view>
        <view style="height: 120rpx"></view>
      </view>
    </u-popup>
  </view>
</template>
<style>
page {
  height: 100%;
  width: 100%;
  background-color: #f2f2f2;
}

</style>
<style scoped lang="scss">
.SubOrder_wrap {
  padding: 30rpx 30rpx 60rpx 30rpx;
  background-color: #F4F4F4;

  .popup_title {
    font-size: 36rpx;
    color: $zzy-text-color-333333;
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin-bottom: 30rpx;
  }

  .subBtn {
    background-color: #F97632;
    border-radius: 200rpx;
    text-align: center;
    width: 100%;
    line-height: 88rpx;
    height: 88rpx;
    font-weight: bold;
    color: #ffffff;
    font-size: 32rpx;
  }
}

.bottom {
  position: fixed;
  bottom: 0;
  z-index: 2;
  background: white;
  padding-bottom: constant(safe-area-inset-bottom);
  /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 兼容 iOS >= 11.2 */
}

.noneData {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.order_list_wrap {
  padding: 20rpx;
  background-color: #f2f2f2;

  .order_list_item {
    margin-bottom: 30rpx;
    border-radius: 24rpx;
    padding: 24rpx;
    background-color: white;
    position: relative;

    .right_top_icon {
      width: 68rpx;
      height: 68rpx;
      position: absolute;
      top: 20rpx;
      right: 20rpx;
    }

    .order_title {
      align-items: center;
      justify-content: space-between;

      .shop_title {
        align-items: center;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 6rpx;
          border-radius: 100rpx;
        }

        text {
          color: $zzy-text-color-999999;
          font-size: 24rpx;
          -webkit-line-clamp: 1;
        }
      }

      .status {
        flex: 1;
        text-align: right;
        font-size: 24rpx;

        .color1 {
          color: #FF4E0D;
        }

        .color2 {
          color: #00AA3B;
        }
      }
    }

    .goods_info {
      align-items: flex-start;

      .goods_img {
        width: 96rpx;
        height: 96rpx;

        image {
          width: 96rpx;
          height: 96rpx;
          border-radius: 200rpx;
        }
      }

      .goods_name {
        padding-left: 16rpx;
        flex: 1;
        margin-bottom: 24rpx;

        view:nth-child(1) {
          font-weight: bold;
          color: $zzy-text-color-333333;
          font-size: 30rpx;
        }

        view:nth-child(2) {
          font-size: 26rpx;
          color: $zzy-text-color-666666;
          margin: 8rpx 0;
        }

        view:nth-child(3) {
          align-items: center;
          font-size: 26rpx;
          color: $zzy-text-color-666666;
          flex: 1;

          span {
            margin-left: 10rpx;
          }
        }
      }
    }

    .bohui_yin {
      border-radius: 16rpx;
      padding: 20rpx;
      background-color: #FCF0ED;
      margin-bottom: 24rpx;

      view:nth-child(1) {
        color: #FF4E0D;
      }

      view:nth-child(2) {
        color: $zzy-text-color-666666;
      }
    }

    .order_btnzu {
      align-items: center;
      justify-content: flex-end;

      .lxkf {
        flex: 1;
        align-items: center;
        color: $zzy-text-color-333333;
        font-size: 24rpx;
      }

      .right_zu {
        justify-content: center;

        view:nth-child(1) {
          border-radius: 200rpx;
          width: 300rpx;
          height: 68rpx;
          line-height: 68rpx;
          border: 1px solid #d9d9d9;
          color: #999999;
          text-align: center;
          font-size: 28rpx;
        }

        view:nth-child(3) {
          border-radius: 200rpx;
          width: 300rpx;
          height: 68rpx;
          line-height: 56rpx;
          border: 1px solid #d9d9d9;
          color: #999999;
          text-align: center;
          font-size: 28rpx;
          margin-left: 20rpx;
        }
      }
    }
  }
}
</style>